<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>tab切换</title>
	<style type="text/css">
	html,body {
		margin: 0;
		padding: 0;
	}
		ul,li{
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		.tab .navbar {
			/*width: 200px;*/
			/*border: 1px solid #eee;*/
		}
		.nav .navbar>li {
			float: left;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
			padding:10px;
			/*border-right: 1px solid #eee;*/
			border: 1px solid #eee;
		}
/*		.nav .navbar>li:last-child {
			border: none;
		}*/
		.navbar li:hover {
			background: #eee;
		}
		.tab .panel-ct {
			width: 750px;
			/*border: 1px solid #666;*/
		}
		.tab .panel {
			display: none;
		}
		.tab .panel.active {
			display: block;
		}
		.panel .prod {
			margin-left: -20px;
		}
		.panel .prod li {
			float: left;
			text-align: center;
			/*padding-right: 30px;*/
			border: 1px solid #eee;
			width: 220px;
			/*height: 200px;*/
			margin-left: 20px;
			margin-bottom: 20px;
		}
		.tab .panel .prod-list {
			position: relative;
		}
		.panel .prod-list .cover {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			/*display: none;*/
			/*transition: all 0.3s;*/
			opacity: 0;
			background: rgba(0,0,0, 0.3);
		}
		.tab .panel .cover .btn{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			border: 1px solid #c81623;
			font-size: 16px;
			padding: 10px 20px;
			color: #c81623;
			cursor: pointer;
			background: #fff;
		}
		.tab .prod-list.hover .cover{
      opacity: 1;
    }
	</style>
</head>
<body>
<div class="tab">
	<div class="nav">
		<ul class="navbar clearfix">
			<li class="active"><a href="javascript:void(0)">热门</a></li>
			<li><a href="javascript:void(0)">珠宝首饰</a></li>
			<li><a href="javascript:void(0)">奢侈品</a></li>
		</ul>
	</div>

	<div class="panel-ct">
		<li class="panel active">
			<ul class="prod clearfix">
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
			</ul>
		</li>


		<li class="panel">
			<ul class="prod clearfix">
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥899.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥99.00</p>
				</li>
			</ul>
		</li>

		<li class="panel">
			<ul class="prod clearfix">
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥999.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥999.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥699.00</p>
				</li>
				<li class="prod-list">
					<div class="cover"><a class="btn" href="">立即抢购</a></div>
					<a href="">
						<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg">
					</a>
					<p class="prod-name">藏美千足金和田玉金镶玉路路通吊坠</p>
					<p class="prod-price">¥1699.00</p>
				</li>
			</ul>
		</li>

	</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
	$('.tab .navbar li').on('click',function(e){
		var $cur = $(this),
		    idx = $cur.index();
		$cur.siblings().removeClass('active');
		$cur.addClass('active');

		$cur.parents('.tab').find('.panel').removeClass('active');
		$cur.parents('.tab').find('.panel').eq(idx).addClass('active');
	});
	$('.prod-list').on('mouseenter',function(){
		$(this).addClass('hover');
	});
	$('.prod-list').on('mouseleave',function(){
		$(this).removeClass('hover');
	})
</script>
</body>
</html>